<template>
  <div id="home">
    <!-- 头部导航 -->
    <div id="toplan">
      <table class="tab">
        <tr>
          <th>所有</th>
          <th>图书</th>
          <th>服饰</th>
          <th>电脑</th>
        </tr>
      </table>
    </div>

    <!-- 商品 -->
    <div id="items">
      <div class="imgbox" v-for="(item, index) in datalist" :key="index">
        <img :src="item.src" alt="加载失败" />
        <h3>{{item.name}}</h3>
        <span>￥{{item.price}}</span><el-button type="primary" icon="el-icon-plus" circle class="butjia" size="mini"></el-button>
      </div>
    </div>

    <!-- 底部导航 -->
    <div id="bumplan">
      <table class="tab">
        <tr>
          <th>首页</th>
          <th>购物车</th>
          <th>我的</th>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datalist: [],
    };
  },
  methods: {
    init() {
      this.$axios.get("http://localhost:8080/data.json").then((res) => {
        this.datalist = res.data.books;
      });
    },
  },
  created() {
    this.init();
  },
};
</script>

<style>
#home {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
#toplan {
  width: 100%;
  height: 50px;
  border: 2px solid orange;
  background-color: white;
  position: fixed;
  top: 0;
}
.tab {
  width: 100%;
  color: rgba(199, 83, 48, 0.781);
  height: 50px;

  /* display: flex; */
}
#bumplan {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  background-color: white;
}

#items {
  width: 95%;
  display: flex;
  margin-top: 22%;
  flex-wrap: wrap;
}
.imgbox {
  width: 45%;
  height: 250px;
  margin-left: 5%;
}

img {
  width: 100%;
  height: 60%;
}
.butjia{
 margin-left: 50%;
}
</style>